<p>This rule raises an issue when <code>parentNode.removeChild(childNode)</code> is used instead of the more direct <code>childNode.remove()</code>
method.</p>
<h2>Why is this an issue?</h2>
<p>The traditional way to remove a DOM element in JavaScript was to call <code>parentNode.removeChild(childNode)</code>. This approach requires you to
first access the parent node, then call <code>removeChild</code> with the child node as an argument.</p>
<p>Modern browsers support the <code>remove()</code> method directly on DOM nodes, which provides a cleaner and more intuitive API. Using
<code>childNode.remove()</code> is simpler because:</p>
<ul>
  <li> It requires less code and fewer method calls </li>
  <li> It’s more readable and expresses the intent more clearly </li>
  <li> It eliminates the need to access the parent node </li>
  <li> It follows modern JavaScript patterns </li>
</ul>
<p>The <code>remove()</code> method has been widely supported across browsers for many years and is the recommended approach for removing DOM
elements.</p>
<h3>What is the potential impact?</h3>
<p>Using the older <code>removeChild</code> pattern makes code more verbose and harder to read. While functionally equivalent, the modern
<code>remove()</code> method improves code maintainability and follows current best practices for DOM manipulation.</p>
<h3>How to fix?</h3>
<p>Replace <code>parentNode.removeChild(childNode)</code> with <code>childNode.remove()</code>. This directly removes the element without needing to
access its parent.</p>
<h4>Non-compliant code example</h4>
<pre data-diff-id="1" data-diff-type="noncompliant">
parentNode.removeChild(foo); // Noncompliant
parentNode.removeChild(this); // Noncompliant
</pre>
<h4>Compliant code example</h4>
<pre data-diff-id="1" data-diff-type="compliant">
foo.remove();
this.remove();
</pre>
<h3>Documentation</h3>
<ul>
  <li> <a href="https://github.com/sindresorhus/eslint-plugin-unicorn#readme">eslint-plugin-unicorn</a> - Rule <a
  href="https://github.com/sindresorhus/eslint-plugin-unicorn/blob/HEAD/docs/rules/prefer-dom-node-remove.md">prefer-dom-node-remove</a> </li>
  <li> MDN: ChildNode.remove() - <a href="https://developer.mozilla.org/en-US/docs/Web/API/ChildNode/remove">Documentation for the modern remove()
  method</a> </li>
  <li> MDN: Node.removeChild() - <a href="https://developer.mozilla.org/en-US/docs/Web/API/Node/removeChild">Documentation for the legacy
  removeChild() method</a> </li>
</ul>
